<template>
  <!-- 定向包显示 -->
  <div>
    <div class="package">
      <div class="list" v-for="(item,index) in value" :key="index">
        <a-checkbox-group>
          <div class="list-title"> 
            {{ item.name }}
            <span class="a-icon" @click="closePackage(item,index)">
              <a-icon type="close" />
            </span>
          </div>
          <div class="list-content"> 
            <div>
              <package-list
                :list="item"
                :listformat="listformat"
              ></package-list>
            </div>
          </div>
          <div class="list-num">
            <span>预计人群日覆盖：</span>
            <div>
              <div>抖音视频： {{ Rounding(item.estimate.aweme.num) }} 日活用户</div>
              <div>火山视频： {{ Rounding(item.estimate.hotsoon.num) }} 日活用户</div>
              <div>今日头条： {{ Rounding(item.estimate.toutiao.num) }} 日活用户</div>
              <div>番茄视频： {{ Rounding(item.estimate.video_app.num) }} 日活用户</div>
            </div>
            <span class="num-time">{{ item.updated_at.split(' ')[0] }}</span>
          </div>
          
        </a-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
import packageList from "@/components/packageList";

export default {
  components:{ packageList },
  props:{
    value:{
      type:Array,
      default:[]
    }
  },
  data(){
    return {
      listformat:[
        { title:'地域',prop:'audience_city_names',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( !arrs ) return '不限'
          arrs.forEach(ele => {
            arr += `${ele}、`
          });
          return arr
        } },
        { title:'性别',prop:'gender',foritem:'audience',type:'group',formatter:(text)=>{
          let value
          this.$global.audienceGender.forEach(ele => {
            if(ele.value == text){ value = ele.label }
          });
          return value
        } },
        { 
          title:'年龄',prop:'age',foritem:'audience',type:'array',formatter:(arrs)=>{
            let arr = ''
            if( !arrs ) return '不限'
            this.$global.audienceAgeBetween.forEach(ele => {
              if( arrs.indexOf(ele.value) !== -1 ){
                arr += `${ele.label}、`
              }
            });
            return arr
          }
        },
        { title:'行为兴趣',prop:'interest_action_mode',foritem:'audience',type:'group',formatter:(text)=>{
          let value
          this.$global.actionInterest.forEach(ele => {
            if(ele.value == text){ value = ele.label }
          });
          return value
        } },
        // { title:'行为天数',prop:'action_days' },
        // { title:'抖音达人',prop:'city' },
        { title:'平台',prop:'platform',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( arrs.length === this.$global.audiencePlatform.length ){ return '不限' }
          this.$global.audiencePlatform.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        { title:'文章分类',prop:'article_category',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          console.info(arrs,'文章分类')
          if( !arrs ) return '不限'
          this.$global.articleCategory.forEach(ele => {
            if( arrs.indexOf(ele.key) !== -1 ){
              arr += `${ele.title}、`
            }
          });
          return arr
        } },
        { title:'网络',prop:'ac',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( arrs.length === this.$global.audienceAc.length ){ return '不限' }
          this.$global.audienceAc.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        { title:'智能放量',prop:'auto_extend_enabled',foritem:'audience',type:'group',formatter:(text)=>{
          return text==='0' ? '关闭' : '开启'
        } },
        { title:'运行商',prop:'carrier',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( !arrs ) return '不限'
          this.$global.audienceCarrier.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        // { title:'新用户',prop:'city' },
        { title:'手机品牌',prop:'device_brand',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( arrs.length === this.$global.deviceBrand.length ){ return '不限' }
          this.$global.deviceBrand.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        { title:'手机价格',prop:'launch_price',foritem:'audience',type:'array',formatter:(arrs)=>{
          return `${arrs[0]}-${arrs[1]}`
        } }
      ],
    }
  },
  methods:{
    // 删除定向包
    closePackage(item,index){
      this.$emit('closePackage',item,index)
    },
    // 用户量取整
    Rounding(value){
      let num = Math.floor(value/10000)
      num = num <= 0 ?  '1万' : num >= 10000 ?  `${Math.floor(num/10000)}亿` : `${num}万`
      return num
    },
  }
}
</script>

<style lang="less" scoped>
  .package{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    // border: 1px solid red;
    .list{
      width: 20%;
      height: 320px;
      padding: 0 10px;
      margin-bottom: 10px;
      .ant-checkbox-group{
        border: 1px solid #CCCCCC;
        width: 100%;
        .list-title{
          padding: 0 10px;
          width: 100%;
          height: 30px;
          background-color: #CCCCCC;
          line-height: 30px;
          position: relative;
          .a-icon{
            position: absolute;
            right: 10px;
          }
          .a-icon:hover{
            cursor: pointer;
          }
        }
        .list-content{
          overflow-y: auto;
          font-size: 13px;
          width: 100%;
          padding: 0 10px;
          height: 170px;
        }
        .list-num{
          color: #515A6E;
          background-color: #F9F9F9;
          width: 100%;
          position: relative;
          font-size: 12px;
          overflow: hidden;
          padding: 5px 10px;
          height: 120px;
          .num-time{
            position: absolute;
            right: 10px;
          }
        }
      }
    }
  }
</style>